@use 'src/styles/abstracts' as *;

.StatusLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.25rem;
  padding: 0.25rem 0.5rem 0.25rem 1.375rem;
  border-radius: $border-radius-sm;
  position: relative;
  &.success {
    background: $success-color-10;
    .title {
      color: $success-color-100;
    }
    &::before {
      background: $success-color-100;
    }
    &.disabled {
      &::before {
        background: $success-color-50;
      }
    }
  }
  &.alert {
    background: $pico-5;
    .title {
      color: $pico-50;
    }
    &::before {
      background: $pico-50;
    }
    &.disabled {
      &::before {
        background: $pico-30;
      }
    }
  }
  &::before {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    top: 7px;
    left: 7px;
    border-radius: $border-radius-circle;
  }
}
